<template>
    <view class="zz-authorize_20200811">
        <notice
            :visible="showNotice"
            :title="title"
            @close="closeNotice">
            <!--  -->
            <template slot="body">
                <view class="zz-flex zz-jc-c zz-mt72 fs32 lh44 color333">{{content}}</view>
            </template>
            <!--  -->
            <template slot="body">
                <view class="zz-mt72">
                    <button 
                        type="primary" 
                        open-type="openSetting"
                        :style="themeStyles.backgroundMainColor" 
                        @opensetting="getOpenSetting">打开授权设置页</button>
                </view>
            </template>
        </notice>
    </view>
</template>
<script>
/* vuex */
import { mapState, mapMutations } from "vuex";
/* 弹窗 */
import notice from "@/components/notice";
export default {
    components:{
      notice  
    },
    props:{
        visible:{
            type:Boolean,
            default:true
        },
        title:{
            type:String,
            default:""
        },
        content:{
            type:String,
            default:"" 
        }
    },
    watch:{
        visible(val){
            if(val){
                this.openNotice();
            }else{
                this.closeNotice();
            }
        }
    },
    data(){
        return {
            showNotice:false
        }
    },
    methods:{
        ...mapMutations("login", ["saveGetLocation"]),
        openNotice(){
            this.showNotice = true;
        },
        closeNotice(){
            this.showNotice = false;
            //
            this.$emit("close");
        },
        getOpenSetting(e){
            console.log(e);
            /* 已授权获取位置信息 */
            if(e.detail.authSetting["scope.userLocation"]){
                //
                this.saveGetLocation(true);
            }
        }
    }
}
</script>
<style lang="scss">
.zz-authorize_20200811 {}
</style>